<template>
  <div class="container" ref="activityWrapper">
    <div class="warp">
      <div class="itemContainer" v-for="(item,index) in dataList" :key="index">
        <img class="img" :src="item.imgs[0]" />
        <div class="discount"><span class="span">{{item.discount}}折</span></div>
        <div class="title">
          <span class="titleSpan">{{item.title}}</span>
        </div>
        <div class="priceContainer">
          <div><span class="nowPrice">￥{{item.nowPrice}}</span></div>
          <div><span class="oldPrice">￥{{item.oldPrice}}</span></div>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
import axios from 'axios';
import BScroll from 'better-scroll';

export default {
  name: 'ActivityList',
  methods: {
    getData() {
      axios.get('/api/data').then((res) => {
        console.log(res);
        this.$store.dispatch('setDataList', res.data.result);
      }).catch((error) => {
        console.error(error);
      });
    },
  },
  mounted() {
    this.getData();
  },

  computed: {
    dataList() {
      return this.$store.state.dataList;
    },
  },
  created() {
    this.$nextTick(() => {
      this.activityScroll = new BScroll(this.$refs.activityWrapper, {
        click: true,
        scrollX: true,
      });
    });
  },
};
</script>

<style scoped>
  .container {
    display: flex;
    flex-direction: row;
    align-items: center;
    overflow: hidden;
    width: 100%;
  }
  .warp{
    min-width: 108%;
    white-space: nowrap;
    display: flex;
    flex-direction: row;
  }
  .itemContainer {
    display: flex;
    flex-direction: column;
    margin-left: 0.3rem;
    margin-top: 0.3rem;
    height: 100%;
    align-items: center;
    position: relative;
  }
  .img{
    position: relative;
    height: 2.6rem;
    width: 2.6rem;
    margin-left: 0.2rem;
    margin-top: 0.2rem;
  }
  .discount {
    position: absolute;
    width: 1.3rem;
    height: 1.3rem;
    align-self: flex-start;
    background-color: red;
    border-radius: 50%;
    display: flex;
    align-items: center;
  }
  .span {
    flex: 1;
    font-size: 0.19rem;
    color: #fff;
    text-align: center;
  }
  .title {
    display: flex;
    max-width: 3.5rem;
    margin-top: 0.5rem;
    flex: 1;
  }
  .titleSpan{
    font-size: 0.38rem;
    color: #333333;
    flex: 1;
    overflow : hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
  .priceContainer {
    display: flex;
    flex-direction: row;
    align-items: center;
  }
  .nowPrice{
    color: red;
    font-size: 0.28rem;
  }
  .oldPrice {
    color: #7e8c8d;
    font-size: 0.28rem;
    margin-left: 0.2rem;
    text-decoration-line: line-through;
  }
</style>
